"use client"

import { useEffect, useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Modal, Pressable, Alert } from "react-native"
import { X, Volume2, Video } from "lucide-react-native"
import { theme } from "../../constants/theme"
import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming } from "react-native-reanimated"
import { LinearGradient } from "expo-linear-gradient"

interface WordExample {
    word: string
    phonetic: string
    translations: {
        pos?: string // Part of speech
        meaning: string
    }[]
}

interface PhoneticSymbolSheetProps {
    visible: boolean
    onClose: () => void
    symbol: string
    type: "vowel" | "diphthong" | "consonant"
    symbolData?: any
}

export default function PhoneticSymbolSheet({ visible, onClose, symbol, type, symbolData }: PhoneticSymbolSheetProps) {
    const translateY = useSharedValue(300)
    const [playingWord, setPlayingWord] = useState<string | null>(null)

    useEffect(() => {
        if (visible) {
            translateY.value = withSpring(0, {
                damping: 20,
                stiffness: 200,
            })
        } else {
            translateY.value = withTiming(300, {
                duration: 250,
            })
        }
    }, [visible])

    const animatedStyle = useAnimatedStyle(() => ({
        transform: [{ translateY: translateY.value }],
    }))

    const playAudio = (word: string) => {
        setPlayingWord(word)
        // Simulate audio playback
        Alert.alert("播放音频", `正在播放: "${word}"`)

        // Reset playing state after 2 seconds
        setTimeout(() => {
            setPlayingWord(null)
        }, 2000)
    }

    const playVideo = () => {
        Alert.alert("播放视频", "正在播放发音视频教程")
    }

    // Example words for the phonetic symbol
    const examples = [
        { word: "we", phonetic: "/wiː/", translations: [{ pos: "pron", meaning: "我们" }] },
        { word: "be", phonetic: "/biː/", translations: [{ pos: "v", meaning: "是；存在；成为" }] },
        {
            word: "he",
            phonetic: "/hiː/",
            translations: [
                { pos: "n", meaning: "他" },
                { pos: "pron", meaning: "他" },
            ],
        },
        { word: "me", phonetic: "/miː/", translations: [{ pos: "pron", meaning: "我（英语）" }] },
        { word: "see", phonetic: "/siː/", translations: [{ pos: "v", meaning: "看；领悟" }] },
        { word: "eve", phonetic: "/iːv/", translations: [{ pos: "n", meaning: "一个特殊日子的前夕或前夜" }] },
        { word: "fee", phonetic: "/fiː/", translations: [{ pos: "n", meaning: "费用" }] },
    ]

    return (
        <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
            <View style={styles.overlay}>
                <Pressable style={styles.backdrop} onPress={onClose} />
                <Animated.View style={[styles.content, animatedStyle]}>
                    {/* Handle bar */}
                    <View style={styles.header}>
                        <View style={styles.handle} />
                    </View>

                    {/* Close button */}
                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                        <X size={16} color={theme.colors.neutral.gray} />
                    </TouchableOpacity>

                    {/* Audio and Video controls */}
                    <View style={styles.controlsContainer}>
                        <TouchableOpacity style={styles.audioButton} onPress={() => playAudio(symbol)} activeOpacity={0.7}>
                            <Text style={styles.symbolText}>{symbol}</Text>
                            <Volume2 size={18} color={theme.colors.primary.default} />
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.videoButton} onPress={playVideo} activeOpacity={0.7}>
                            <Text style={styles.symbolText}>{symbol}</Text>
                            <Video size={18} color={theme.colors.secondary.orange.default} />
                        </TouchableOpacity>
                    </View>

                    {/* Word examples */}
                    <ScrollView style={styles.examplesList} showsVerticalScrollIndicator={false}>
                        {examples.map((example, index) => (
                            <TouchableOpacity
                                key={index}
                                style={styles.exampleItem}
                                onPress={() => playAudio(example.word)}
                                activeOpacity={0.7}
                            >
                                <View style={styles.wordSection}>
                                    <Text style={styles.wordText}>{example.word}</Text>
                                    <Text style={styles.phoneticText}>{example.phonetic}</Text>
                                </View>
                                <View style={styles.meaningSection}>
                                    {example.translations.map((translation, i) => (
                                        <View key={i} style={styles.translationRow}>
                                            {translation.pos && (
                                                <View style={styles.posTag}>
                                                    <Text style={styles.posText}>{translation.pos}</Text>
                                                </View>
                                            )}
                                            <Text style={styles.meaningText}>{translation.meaning}</Text>
                                        </View>
                                    ))}
                                </View>
                            </TouchableOpacity>
                        ))}

                        {/* Bottom buttons */}
                        <View style={styles.bottomButtons}>
                            <TouchableOpacity style={styles.secondaryButton} onPress={() => console.log("View more")}>
                                <Text style={styles.secondaryButtonText}>查看更多</Text>
                            </TouchableOpacity>

                            <TouchableOpacity style={styles.primaryButton} onPress={() => console.log("Learn list")}>
                                <LinearGradient
                                    colors={theme.colors.primary.gradient}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                    style={styles.gradientButton}
                                >
                                    <Text style={styles.primaryButtonText}>学习此列表</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                        </View>

                        {/* Add some bottom padding for iOS devices */}
                        <View style={{ height: Platform.OS === "ios" ? 34 : 20 }} />
                    </ScrollView>
                </Animated.View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: "flex-end",
    },
    backdrop: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "rgba(0, 0, 0, 0.3)",
    },
    content: {
        backgroundColor: theme.colors.neutral.white,
        borderTopLeftRadius: theme.borderRadius.extraLarge,
        borderTopRightRadius: theme.borderRadius.extraLarge,
        paddingTop: theme.spacing.md,
        maxHeight: "80%",
    },
    header: {
        alignItems: "center",
        paddingVertical: theme.spacing.sm,
    },
    handle: {
        width: 36,
        height: 4,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 2,
    },
    closeButton: {
        position: "absolute",
        right: theme.spacing.lg,
        top: theme.spacing.md,
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
        justifyContent: "center",
        zIndex: 10,
    },
    controlsContainer: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        paddingVertical: theme.spacing.md,
        gap: theme.spacing.xl,
    },
    audioButton: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: `${theme.colors.primary.default}15`,
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.large,
        gap: theme.spacing.sm,
    },
    videoButton: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: `${theme.colors.secondary.orange.default}15`,
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.large,
        gap: theme.spacing.sm,
    },
    symbolText: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    examplesList: {
        paddingHorizontal: theme.spacing.lg,
        paddingTop: theme.spacing.sm,
    },
    exampleItem: {
        flexDirection: "row",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        marginBottom: theme.spacing.md,
        overflow: "hidden",
        shadowColor: "rgba(0,0,0,0.08)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 1,
        shadowRadius: 4,
        elevation: 2,
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
    },
    wordSection: {
        width: "40%",
        padding: theme.spacing.md,
        backgroundColor: `${theme.colors.primary.default}08`,
        borderRightWidth: 1,
        borderRightColor: theme.colors.neutral.lightGray,
    },
    wordText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: 2,
    },
    phoneticText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        fontFamily: Platform.select({ ios: "System", android: "monospace" }),
    },
    meaningSection: {
        flex: 1,
        padding: theme.spacing.md,
        backgroundColor: theme.colors.neutral.white,
    },
    translationRow: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 2,
    },
    posTag: {
        backgroundColor: `${theme.colors.primary.default}15`,
        paddingHorizontal: 6,
        paddingVertical: 2,
        borderRadius: 4,
        marginRight: theme.spacing.xs,
    },
    posText: {
        fontSize: 10,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    meaningText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        flex: 1,
    },
    bottomButtons: {
        flexDirection: "row",
        marginTop: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        gap: theme.spacing.md,
    },
    secondaryButton: {
        flex: 1,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
        justifyContent: "center",
    },
    secondaryButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        fontWeight: theme.fontWeight.semiBold,
    },
    primaryButton: {
        flex: 1,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
    },
    gradientButton: {
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        justifyContent: "center",
    },
    primaryButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

